<template>
  <view class="settle-box">
    <view class="allChoose">
      <label class="radio" @click="checkedAll">
        <radio color="#C00000" :checked="isCheckedAll" /><text>全选</text>
      </label>
    </view>
    
    <view class="amount">
      合计: <text class="amount-price">￥{{ checkedAmount | toFixTow }}</text>
    </view>
    
    <view class="settle-btn" @click="toSettle">
      结算({{ checkedCount }})
    </view>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  
  export default {
    name:"my-settle",
    data() {
      return {
        // 定时器
        timer: null
      };
    },
    methods: {
      ...mapMutations('m_cart', ['changeStateForUnify', 'deleteGoods', 'deleteMany']),
      ...mapMutations('m_user', ['updateRedirectInfo']),
      checkedAll() {
        // 让它的 checked 取反 拿到值(allState) 并且改变 cart中的所有goods项的goods_state为allState
        let allState = !this.isCheckedAll
        this.changeStateForUnify(allState)
      },
      toSettle() {
        
        // 如果未选中商品则提示
        if(!this.checkedCount) return uni.$showMsg('未选中商品')
         
        // 如果未选中地址则提示
        if(!this.detailsAddress) return uni.$showMsg('未选中商品地址')
        
        // 如果未登录则提示，延时跳转到登录页
        // if(!this.token) return uni.$showMsg('未登录')
        if(!this.token) return this.delaySwitchBar()
        
        // 进行订单支付
        this.orderPay()
      },
      async orderPay() {
        // 1.创建订单
        //  1.1 创建请求体所需要的参数对象
        const orderInfo = {
          // 订单总价格
          // order_price: this.checkedAmount,
          //   在开发中先把订单总价格设置为0.01以便测试
          order_price: 0.01,
          // 订单收货地址
          consignee_addr: this.detailsAddress,
          // 订单的所有商品项，里面包含一个请求需要的商品项数据对象
          goods: this.cart.filter(item => item.goods_state).map(goods => ({
            // 商品id
            goods_id: goods.goods_id,
            // 购买的数量
            goods_number: goods.goods_count,
            // 商品单价
            goods_price: goods.goods_price,
          })),
        }
        //  1.2 将该对象作为参数传入API中
        const {data: res} = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
        
        // 由于我们现在token值是模拟的假token，因此后端API找不到与我们登录对应的token值，所以返回来的会是一个 "无效token值" 的提示。
        // console.log(res)
        if(res.meta.status !== 200) return uni.$showMsg('创建订单失败')
        // *************因此下面的代码不会执行了****************
        
        //  1.3 得到服务器响应的 "订单编号"
        const orderNumber = res.message.order_number
        
        // 2. 订单预支付
        //  2.1 发起请求获取 订单的预支付信息，传入获得的 订单编号
        const {data: res2} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {order_number: orderNumber})
        //  2.2 预付订单生成失败
        if(res2.meta.status !== 200) return uni.$showMsg('预付订单生成失败')
        //  2.3 得到订单支付相关的必要属性
        const payInfo = res2.message.pay
        // console.log(payInfo)
        
        // 3. 发起微信支付 
        //  3.1 调用uni.requestPayment() API, OBJECT 参数说明可查看官方文档，这里直接把上面得到的 payInfo 传过去就行
        const [err, succ] =  await uni.requestPayment(payInfo)
        //  3.2 未完成支付
        if(err) return uni.$showMsg('订单未支付！')
        //  3.3 完成了支付，进一步查询支付的结果
        const {data: res3} = uni.$http.post('/api/public/v1/my/orders/chkOrder', {
          order_number: orderNumber
        })
        //  3.4 检测到订单未支付
        if(res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
        //  3.5 检测到订单支付完成
        uni.showToast({
          title: '支付完成!',
          icon: 'success'
        })
        
        // 4. 删除在购物车中选中输出的数据
        //   4.1 第一种方法删除
        // this.cart.filter(item => item.goods_state).map(goods => {
        //   // 一个一个的传id删除
        //   this.deleteGoods(goods.goods_id)
        // })
        //   4.2 第二种男方法删除
        // 过滤出没有被选中的商品，也就是删除掉那些选中后已经被支付的商品项
        this.deleteMany(this.cart.filter(item => !item.goods_state))
      },
      // 提示信息
      showTip(delaySeconds) {
        uni.showToast({
          icon: 'none',
          title: `延迟${delaySeconds}秒跳转到登录页面`,
          mask: true,
          duration: 1500
        })
      },
      // 延时跳转tabBar页面
      delaySwitchBar() {
        // 延时3秒
        var seconds = 3
        this.showTip(seconds)
        
        this.timer = setInterval(() => {
          seconds--
          
          if(seconds < 0) {
            // 清楚定时器
            clearInterval(this.timer)
            
            // 进行跳转
            uni.switchTab({
              url: '/pages/my/my',
              // 跳转成功后记录redirectInfo跳转后重定向的信息
              success: () => {
                let redirectInfo = {
                  openType: 'switchTab',
                  url: '/pages/cart/cart'
                }
                this.updateRedirectInfo(redirectInfo)
              }
            })
            return
          }
          
          this.showTip(seconds)
        }, 1000)
        
      }
    },
    computed: {
      ...mapGetters('m_cart', ['checkedAmount', 'checkedCount', 'isCheckedAll']),
      ...mapGetters('m_user', ['detailsAddress']),
      ...mapState('m_user', ['token']),
      ...mapState('m_cart', ['cart']),
    },
    filters: {
      toFixTow(val) {
        // 数值型保留两位小数
        return Number(val).toFixed(2)
      }
    }
  }
</script>

<style lang="scss">
  .settle-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding-left: 5px;
    background-color: #FFFFFF;
    font-size: 14px;
    
    .allChoose {
      .radio {
        display: flex;
        align-items: center;
      }
    }
    
    .amount {
      .amount-price {
        font-weight: 700;
        color: #C00000;
      }
    }
    
    .settle-btn {
      min-width: 100px;
      height: 50px;
      background-color: #C00000;
      color: #FFFFFF;
      line-height: 50px;
      padding: 0 10px;
      text-align: center;
    }
  }
</style>
